﻿@inherits DemoWithResizableComponent
@inject ICountryNamesProvider CountryNamesService

<div class="demo-description" id="IncrementalFiltering">
    <h2><DemoNavLink Link="ComboBox#IncrementalFiltering" />ComboBox - Incremental Filtering</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.FilteringMode">FilteringMode</a> property to specify whether and how the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2#filter-data">ComboBox</a> filters list items when users type in the edit box.
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">Contains</a> - The ComboBox filters list items that contain the search string and highlights matches.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">StartsWith</a> - The ComboBox filters list items that begin with the search string and highlights matches.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">None</a> - The ComboBox does not filter list items.</li>
    </ul>
    <p>
        In this demo, the filter mode is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">Contains</a>.
    </p>
</div>

@if (Data != null) {
    <div class="card demo-card demo-card-shadow">
        <div class="card-header">
            <DemoToolbar @bind-SelectedSize="SizeMode" Title="Type a search string"/>
        </div>
        <div class="card-body mw-480">
            <DxComboBox Id="ComboBox1"
                        Data="@Data"
                        FilteringMode="DataGridFilteringMode.Contains"
                        @bind-Value="@Value"
                        @bind-Text="@Text"
                        TextFieldName="@nameof(Country.CountryName)"
                        SizeMode="SizeMode"></DxComboBox>
        </div>
    </div>

<CodeSnippet_Editor_ComboBox_Filtering />

}

@code {
        IEnumerable<Country> Data;

    protected override async Task OnInitializedAsync() {
        Data = await CountryNamesService.LoadAsync();
    }

    string text = "";
    string Text { get => text; set { text = value; InvokeAsync(StateHasChanged); } }

    Country Value { get; set; }
}
